import React, {Component} from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import './MapContainer.css';


class AMapComponent extends Component {
  
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    let lng = '116.287972'
    let lag = '40.042926'
    AMapLoader.load({
      key: 'f8627653399a0d0d42dc7cf350606a1e', //需要设置您申请的key
      version: "2.0",
      // plugins: ['AMap.Driving', 'AMap.MoveAnimation', 'AMap.DragRoute', 'AMap.ToolBar', 'AMap.PolylineEditor', 'AMap.MarkerCluster'],
      plugins: ['AMap.ElasticMarker', 'AMap.MoveAnimation', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye',
        'AMap.MapType', 'AMap.Geolocation', 'AMap.AdvancedInfoWindow', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.DistrictSearch',
        'AMap.LineSearch', 'AMap.StationSearch', 'AMap.Driving', 'AMap.TruckDriving', 'AMap.Transfer', 'AMap.Walking', 'AMap.Riding',
        'AMap.DragRoute', 'AMap.ArrivalRange', 'AMap.Geocoder', 'AMap.CitySearch', 'AMap.IndoorMap', 'AMap.MouseTool', 'AMap.CircleEditor',
        'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.MarkerCluster', 'AMap.RangingTool', 'AMap.CloudDataLayer', 'AMap.CloudDataSearch',
        'AMap.Weather', 'AMap.RoadInfoSearch', 'AMap.HeatMap', 'AMap.PlaceSearchLayer'],
    }).then((AMap) => {
      
      //基本地图加载
      let map = showMap(AMap, lng, lag)
      
      //添加标签
      // let marker = new AMap.Marker({
      //   // position: [lng, lag],
      //   position: new AMap.LngLat(lng, lag),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //   title: '北京'
      // });
      // map.add(marker);
      
      //路线规划
      let driving = new AMap.Driving({
        map: map,
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        // extensions: 'all',
        // hideMarkers: true,
        // showTraffic: true,
        // autoFitView: true,
      })
      
      //西二旗-开课吧
      let startLngLat = [116.303843, 40.051511]
      let endLngLat = [116.287972, 40.042926]
      
      let now = new Date();
      let noon = new Date(new Date().toLocaleDateString()).getTime() + 14 * 3600 * 1000
      //如果大于下午两点
      if (now > noon) {
        startLngLat = [116.287972, 40.042926]
        endLngLat = [116.303843, 40.051511]
      }
      
      driving.search(startLngLat, endLngLat)
      //路线动态轨迹
      let lineArr = [startLngLat, [116.304439, 40.050164], [116.302846, 40.04965], [116.299343, 40.048858], [116.299772, 40.047811], [116.301826, 40.044435],
        [116.296441, 40.042209], [116.291119, 40.041211], [116.287257, 40.040571], [116.286967, 40.041946], [116.286586, 40.043573],
        [116.287589, 40.043733]]
      
      let marker = new AMap.Marker({
        map: map,
        position: startLngLat,
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        content: '<div class="makerlabel"><img src="https://webapi.amap.com/images/car.png" style="transform:rotate(270deg)"></div>',
      });
      
      let passedPolyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        strokeColor: "#e7c934",  //线颜色
        strokeOpacity: 0.9,     //线透明度
        strokeWeight: 6,      //线宽
        strokeStyle: "solid"  //线样式
      });
      
      map.setFitView();
      
      marker.moveAlong(lineArr, {
        // 每一段的时长
        duration: 3000,//可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        // autoRotation: true,
      });
      
      marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
        // map.setCenter(e.target.getPosition(),true)
      });
      
      
      // //路线规划
      let driving2 = new AMap.Driving({
        map: map,
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        // extensions: 'all',
        // hideMarkers: true,
        // showTraffic: true,
        // autoFitView: true,
      })

      //西二旗-三盛大厦
      let endLngLat2 = [116.281053, 40.042522]
      //如果大于下午两点
      if (now > noon) {
        startLngLat = [116.281053, 40.042522]
        endLngLat2 = [116.303843, 40.051511]
      }
      driving2.search(startLngLat, endLngLat2)
      
      let marker2 = new AMap.Marker({
        map: map,
        position: startLngLat,
        icon: "https://webapi.amap.com/images/bus.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        content: '<div class="makerlabel"><img src="https://webapi.amap.com/images/car.png" style="transform:rotate(270deg)"></div>',
      });
      map.setFitView();
  
      
     
      
    }).catch(e => {
      console.log(e);
    })
  }
  
  render() {
    // 1.创建地图容器
    return (
      <div className="home_div">
        <div className='mark'>
          {/* <span>全部</span> */}
          {/* <select onChange={this.showLine1}>
            <option value ="1">西二旗 -> 开课吧</option>
            <option value ="2">开课吧 -> 西二旗</option>
            <option value ="3">西二旗 -> 三盛大厦</option>
            <option value ="4">三盛大厦 -> 西二旗</option>
          </select> */}
          <button onClick={this.showLine1}>西二旗 -> 开课吧</button>
          <button>开课吧 -> 西二旗</button>
          <button>西二旗 -> 三盛大厦</button>
          <button>三盛大厦 -> 西二旗</button>
        </div>
        <div id="container" className="map" style={{height: '100%'}}/>
      </div>
    );
  }
}

function showMap(AMap, lng, lag) {
  return new AMap.Map("container", {
    resizeEnable: true,
    viewMode: "2D",
    terrain: true, // 开启地形图
    // pitch: 60,
    zoom: 14,
    // zooms: [3, 20],
    center: [lng, lag],
  });
}

// 清除 marker
function clearMarker() {
  // let marker = new AMap.Marker({
  //
  // })
  // if (marker) {
  //   marker.setMap(null);
  //   marker = null;
  // }
}

function startAnimation(marker) {
  // marker.moveAlong(lineArr, 200);
}

function pauseAnimation(marker) {
  marker.pauseMove();
}

function resumeAnimation(marker) {
  marker.resumeMove();
}

function stopAnimation(marker) {
  marker.stopMove();
}

export default AMapComponent;


